<template>
	<view class="container">
		<view class="container-header">
			<view class="container-header_top">
				<view>
					<view class="title" v-if="status != 1" @click="onShowCheckAddress" style="width: 100%;">
						<block v-if="addressList.length > 0">
							{{ address.province }}{{ address.city }}{{ address.area }}
						</block>
						<block v-else>
							暂无收货地址，赶快添加吧
						</block>
					</view>
					<view class="title" v-else>{{ storeDTO.name }}</view>
					<view class="container_introduce container_flex">
						<view>
							<view v-if="status == 1">{{ storeDTO.addressDetail }}</view>
							<view v-else @click="onShowCheckAddress">{{ address.name || '' }} {{ address.phone || '' }}</view>
						</view>
						<view class="title2" v-if="status == 1">距您{{ storeDTO.distance }}</view>
					</view>
				</view>
				<view v-if="status != 1" @click="onShowCheckAddress">
					<u-icon name="arrow-right" size="38rpx" color="#999999" />
				</view>
			</view>
			<view class="container-header_bottom" v-if="status == 1">
				<view class="container_flex">
					<text class="title">自取时间</text>
					<view class="title2 container_flex">
						<text @click="onShowDateCheck">今天{{ currentDate }}</text>
						<u-icon name="arrow-right" size="35rpx" color="#999999" @click="onShowDateCheck" />
					</view>
				</view>
				<view class="container_flex">
					<view class="title">预留电话</view>
					<view class="edit-phone" @click="onEdit">
						<text class="title2">{{ takePhone }}</text>
						<u-icon name="edit-pen" size="35rpx" color="#999999" />
					</view>
				</view>
			</view>
			<view class="remind-title" v-else> 请仔细核对收货地址，订单提交后将无法修改！</view>
		</view>
		<!-- 商品列表 -->
		<view class="container-section">
			<view class="shop-list">
				<block v-for="(item, index) in goodsList" :key="index">
					<view class="shop-list_item">
						<view class="shop-list_item_img">
							<image :src="item.thumbnail" mode="" />
						</view>
						<view class="shop-list_item_text">
							<view class="shop-list_item_text_title">
								{{ item.name }}
							</view>
							<view class="shop-list_item_text_price">
								<view>￥<text>{{ item.memberPrice || item.retailPrice }}</text></view>
								<view class="number">×{{ item.number }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<block v-if="status != 1">
				<view class="freight">
					<view>
						<view>快递费</view>
						<u-icon name="error-circle" size="15" color="#D9D9D9" @click="handleHelp" />
					</view>
					<view class="freight-price" v-if="!isFreeShipping">
						￥<text>7</text>
					</view>
					<view v-else>
						运费 包邮
					</view>
				</view>
			</block>
			<view class="sum-price">
				合计￥<text>{{ totalAmount }}</text>
			</view>
		</view>
		<!-- 结算方式 -->
		<!-- #ifdef APP-PLUS -->
		<view class="payment">
			<view class="paymentTit">选择您的支付方式</view>
			<view class="payItem" @click="paySelect(1)">
				<view class="paymentbox_l">
					<u-icon name="weixin-circle-fill" color="#04BE02" size="32"></u-icon>
					<view class="payType">微信支付</view>
				</view>
				<view class="paymentbox_r">
					<u-icon size="40rpx" :color="payType == 1 ? '#32B499' : '#BBBBBB'"
						:name="payType == 1 ? '/static/icon/checkAct.png' : '/static/icon/check.png'" />
				</view>
			</view>
			<view class="payItem" @click="paySelect(2)">
				<view class="paymentbox_l">
					<u-icon name="zhifubao-circle-fill" color="#1678ff" size="32"></u-icon>
					<view class="payType">支付宝支付</view>
				</view>
				<view class="paymentbox_r">
					<u-icon size="40rpx" :color="payType == 2 ? '#32B499' : '#BBBBBB'"
						:name="payType == 2 ? '/static/icon/checkAct.png' : '/static/icon/check.png'" />
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view style="width: 100%;height:100rpx;padding-bottom: 180rpx;">

		</view>

		<!-- 底部结算 -->
		<view class="container-btn">
			<view>
				<view class="price-sum">
					<view class="btn-logo">
						<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/self-pickup-logo.png"
							mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
					</view>
					<view class="price-sum_content">
						<view class="total-price">
							<view>
								￥<text>{{ totalAmount }}</text>
							</view>
							<block v-if="status != 1">
								<text class="freeShipping" v-if="isFreeShipping">免运费</text>
								<text v-else>满99免费包邮</text>
							</block>
							<block v-else>
								<text>到店自提 免费配送</text>
							</block>
						</view>
					</view>
				</view>
				<view class="submit-payment" @click="goConfirmOrder"> 提交支付 </view>
			</view>
		</view>
		<!-- 选择取货时间 时分 -->
		<u-popup :show="dateVisible" @close="onDateVisibleHide">
			<view class="popup-block">
				<view class="picker-header_title">选择取货时间</view>
				<view class="picker-section">
					<view class="picker-section_left">
						<view>今天({{ currentMonthDay }}{{ currentWeek }})</view>
					</view>
					<view class="picker-section_right">
						<block v-for="(item, index) in takeGoodsTimeList" :key="index">
							<view v-if="item.timeHour == ''" class="now-take"
								:class="item.id == takeGoodsCheck ? 'take-goods-checkd' : ''" @click="checkTakeGoodsTime(item, '立即取货')">
								<view>立即取货</view>
								<u-icon v-if="item.id == takeGoodsCheck" name="checkmark" size="50rpx" color="#32B499" />
							</view>
							<view v-else class="now-take" :class="item.id == takeGoodsCheck ? 'take-goods-checkd' : ''"
								@click="checkTakeGoodsTime(item)">
								<view>{{ item.timeHour }}:{{ item.timeMinute }}</view>
								<u-icon v-if="item.id == takeGoodsCheck" name="checkmark" size="50rpx" color="#32B499" />
							</view>
						</block>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 选择收货地址 -->
		<u-popup :show="selectedVisible" @close="onHideCheckAddress">
			<view class="popup_selected_product">
				<view class="popup_title">收货地址</view>
				<view class="popup_operate">
					<view @click="$goPath(2, '/pages/premiumBag/mine/addAddress')">新增</view>
					<view @click="$goPath(2, '/pages/premiumBag/mine/address')">管理</view>
				</view>
				<view class="popup-address_list" v-if="addressList.length > 0">
					<block v-for="(item, index) in addressList" :key="index">
						<view class="address-list-item" @click="onSelectAddress(item)">
							<view>
								<image v-if="item.isDefault == 1" src="/static/icon/addressDefault.png"
									mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
								<view v-else class="address-list-item_left">{{ item.isDefaultName }}</view>
								<view class="address-list-item_center">
									<view>
										<text class="name">{{ item.name }}</text>
										<text>{{ item.phone }}</text>
										<view v-if="item.isDefault == 1" class="default-text">默认</view>
									</view>
									<view>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.detail }}</view>
								</view>
							</view>
							<view>
								<u-icon size="40rpx" :color="item.isSelected ? '#32B499' : '#BBBBBB'"
									:name="item.isSelected ? '/static/icon/checkAct.png' : '/static/icon/check.png'" class="check" />
							</view>
						</view>
					</block>
				</view>
				<cart-empty v-else tip="暂无收货地址" btnText="去添加" @handleClick="$goPath(2, '/pages/premiumBag/mine/addAddress')" />
			</view>
		</u-popup>

		<!-- 修改用户预留手机 -->
		<u-popup :show="editPhoneModal" @close="onEditPhoneModalHide" mode="center">
			<view class="container-editPhone">
				<view class="edit-input">
					<input type="text" v-model="phoneValue" placeholder="请输入手机号" />
				</view>
				<view class="edit-btns">
					<view @click="onEditPhoneModalHide">取消</view>
					<view @click="handleEditPhone">确定</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showLoading" @open="showLoading = true" mode="center" bgColor="transparent">
			<view class="loading_popup">
				<view class="loading_title">
					尊敬的用户：
				</view>
				<view class="loading_box" v-html="loadingValue">
				</view>
				<view class="loading_btn" @click="showLoading = false">
					确认
				</view>
			</view>
		</u-popup>

		<!-- 快递费介绍 -->
		<u-popup :show="freightModal" @close="onFreightModalHide" mode="center">
			<view class="container-freightModal">
				<view class="container-freightModal-title">快递收费规则</view>
				<view class="container-freightModal-content">
					<view>1. 消费满99包邮</view>
					<view>2.未满99元根据订单数量 收费每单7元 注：（青海、甘肃、内蒙、宁夏、海南、西藏、新疆地区不发）</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>
<script>
	import {
		convertWeek
	} from '@/utils/util';
	let takeGoodsTime = [{
			id: 1,
			timeHour: 6,
			timeMinute: '00'
		},
		{
			id: 2,
			timeHour: 6,
			timeMinute: '30'
		},
		{
			id: 3,
			timeHour: 7,
			timeMinute: '00'
		},
		{
			id: 4,
			timeHour: 7,
			timeMinute: '30'
		},
		{
			id: 5,
			timeHour: 8,
			timeMinute: '00'
		},
		{
			id: 6,
			timeHour: 8,
			timeMinute: '30'
		},
		{
			id: 7,
			timeHour: 9,
			timeMinute: '00'
		},
		{
			id: 8,
			timeHour: 9,
			timeMinute: '30'
		},
		{
			id: 9,
			timeHour: 10,
			timeMinute: '00'
		},
		{
			id: 10,
			timeHour: 10,
			timeMinute: '30'
		},
		{
			id: 11,
			timeHour: 11,
			timeMinute: '00'
		},
		{
			id: 12,
			timeHour: 11,
			timeMinute: '30'
		},
		{
			id: 13,
			timeHour: 12,
			timeMinute: '00'
		},
		{
			id: 14,
			timeHour: 12,
			timeMinute: '30'
		},
		{
			id: 15,
			timeHour: 13,
			timeMinute: '00'
		},
		{
			id: 16,
			timeHour: 13,
			timeMinute: '30'
		},
		{
			id: 17,
			timeHour: 14,
			timeMinute: '00'
		},
		{
			id: 18,
			timeHour: 14,
			timeMinute: '30'
		},
		{
			id: 19,
			timeHour: 15,
			timeMinute: '00'
		},
		{
			id: 20,
			timeHour: 15,
			timeMinute: '30'
		},
		{
			id: 21,
			timeHour: 16,
			timeMinute: '00'
		},
		{
			id: 22,
			timeHour: 16,
			timeMinute: '30'
		},
		{
			id: 23,
			timeHour: 17,
			timeMinute: '00'
		},
		{
			id: 24,
			timeHour: 17,
			timeMinute: '30'
		},
		{
			id: 25,
			timeHour: 18,
			timeMinute: '00'
		},
		{
			id: 26,
			timeHour: 18,
			timeMinute: '30'
		},
		{
			id: 27,
			timeHour: 19,
			timeMinute: '00'
		},
		{
			id: 28,
			timeHour: 19,
			timeMinute: '30'
		},
		{
			id: 29,
			timeHour: 20,
			timeMinute: '00'
		},
		{
			id: 30,
			timeHour: 20,
			timeMinute: '30'
		},
		{
			id: 31,
			timeHour: 21,
			timeMinute: '00'
		},
		{
			id: 32,
			timeHour: 21,
			timeMinute: '30'
		},
		{
			id: 33,
			timeHour: 22,
			timeMinute: '00'
		},
	];
	import {
		getUserInfo
	} from '@/common/auth';
	import cartEmpty from '@/components/cartEmpty/index';

	export default {
		components: {
			cartEmpty
		},
		data() {
			return {
				showLoading: false,
				loadingValue: '',
				userId: getUserInfo().ypdUser?.userId,
				address: {},
				goodsList: [],
				selectedVisible: false,
				takeGoodsTimeList: takeGoodsTime,
				takeGoodsCheck: -1,
				dateVisible: false,
				currentMonthDay: `${new Date().getMonth() + 1}.${new Date().getDate()}`,
				currentWeek: convertWeek(new Date().getDay()),
				currentDate: `${new Date().getHours()}:${new Date().getMinutes()}`,
				status: 0,
				addressList: [],
				takeName: '',
				takePhone: '',
				phoneValue: '',
				editPhoneModal: false,
				isFreeShipping: false,
				freightModal: false,
				payType: 2,
				totalAmount: ''
			}
		},
		onShow() {
			this.init();
		},
		onLoad(options) {
			console.log(options)
			let phone = getUserInfo()?.ypdUser.phone
			let userName = getUserInfo()?.ypdUser.name
			let cartAddress = uni.getStorageSync('cartAddress') || {};
			const {
				totalAmount = 0, message, storeDTO = ''
			} = options;
			let goodsList = JSON.parse(decodeURIComponent(options.checkedList));
			console.log(goodsList)
			let status = 0;
			if (message == '社区店') {
				status = 1;
				this.storeDTO = JSON.parse(storeDTO)
			} else if (message == '立即购买') {
				status = 2;
			};

			let total = 0;
			if (status != 1) {
				if (Number(totalAmount).toFixed(2) >= 99) {
					total = Number(totalAmount).toFixed(2);
				} else {
					total = (Number(totalAmount) + 7).toFixed(2)
				}
			} else {
				total = Number(totalAmount).toFixed(2)
			}
			this.totalAmount = total
			console.log(this.totalAmount, 'options')
			this.isFreeShipping = Number(totalAmount).toFixed(2) >= 99 ? true : false
			this.goodsList = goodsList
			this.address = status == 0 ? cartAddress : {},
				this.status = status
			this.takePhone = phone
			this.takeName = userName
		},
		methods: {
			// 获取公告弹窗内容
			async getLoading() {
				let result = await this.$request.systemSettingsGet({
					key: 'home_page_windows'
				})
				this.loadingValue = '&nbsp&nbsp&nbsp&nbsp' + result.data?.settingValue;
			},
			// 选择支付方式
			paySelect(payType) {
				let _this = this;
				// if(payType == 1){
				// 	this.showLoading = true
				// 	this.getLoading()
				// }else{
				// 	_this.payType = payType;
				// }
				_this.payType = payType;
			},
			async init() {
				const {
					status
				} = this;
				if (status == 1) {
					this.getDateTimeList();
				}
				this.getAddressList();
			},
			async getAddressList() {
				const {
					userId,
					status
				} = this;
				if (status != 1) {
					let result = await this.$request.miniMyAddress({
						userId
					})
					const {
						data
					} = result;
					if (data.length > 0) {
						let spliceArr = [];
						data.forEach((item, index) => {
							item.isSelected = false;
							if (item.isDefault == 0) {
								item.isDefaultName = item.name.slice(0, 1);
							} else {
								spliceArr = data.splice(index, 1);
							}
						});
						if (spliceArr.length > 0) {
							data.unshift(spliceArr[0]);
						}
						data[0].isSelected = true;
						if (this.status == 2) {
							this.address = data[0]
						} else if (this.status == 0) {
							this.address = data[0]
						}
						this.addressList = result.data
					} else {
						this.$toast('还没有收货地址，快去新建吧!');
						this.addressList = []
						this.address = {}
					}
				}
			},
			getDateTimeList() {
				let myDate = new Date();
				let nowHours = myDate.getHours();
				let nowMinutes = myDate.getMinutes();
				let arrTimeList = [];
				const {
					takeGoodsTimeList
				} = this;
				arrTimeList.push({
					timeHour: '',
					timeMinute: '',
					status: 'now',
					id: -1
				});
				takeGoodsTimeList.map((item, index) => {
					if (nowHours <= item.timeHour) {
						if (nowHours == item.timeHour) {
							if (nowMinutes >= item.timeMinute && nowMinutes <= takeGoodsTimeList[index + 1].timeMinute) {
								arrTimeList.push(takeGoodsTimeList[index + 1])
							}
						} else {
							arrTimeList.push(item)
						}
					}
				});
				this.takeGoodsTimeList = arrTimeList
			},

			onShowCheckAddress() {
				this.selectedVisible = true
			},

			onHideCheckAddress(e) {
				this.selectedVisible = false
			},

			onShowDateCheck() {
				this.dateVisible = true
			},

			onDateVisibleHide() {
				this.dateVisible = false
			},

			checkTakeGoodsTime(item, only = "") {
				let timer = `${new Date().getHours()}:${new Date().getMinutes()}`;
				this.takeGoodsCheck = item.id
				this.dateVisible = false
				this.currentDate = only != '' ? timer : `${item.timeHour}:${item.timeMinute}`
			},

			//选择收货地址
			onSelectAddress(detail) {
				const {
					addressList
				} = this;
				let addressDetail = {};
				addressList.map(item => {
					if (item.id == detail.id) {
						item.isSelected = true;
						addressDetail = detail;
						uni.setStorageSync('cartAddress', detail);
					} else {
						item.isSelected = false;
					}
				});
				this.addressList = addressList
				this.selectedVisible = false
				this.address = addressDetail
			},

			//修改用户预留手机
			onEdit() {
				this.editPhoneModal = true
				this.phoneValue = this.takePhone
			},

			//隐藏
			onEditPhoneModalHide() {
				this.editPhoneModal = false
			},

			//确认修改手机号
			handleEditPhone() {
				if (!this.$tools.verifyMobeil(this.phoneValue)) {
					this.$toast('请填写正确的手机号');
					return;
				}
				uni.setStorageSync('phone', this.phoneValue);
				this.takePhone = this.phoneValue
				this.$toast('修改成功!');
				this.editPhoneModal = false
			},

			//点击快递费 介绍icon
			handleHelp() {
				this.freightModal = true
			},

			//快递费介绍
			onFreightModalHide() {
				this.freightModal = !this.freightModal
			},

			//创建支付订单
			goConfirmOrder() {
				const {
					address,
					status,
					goodsList,
					userId,
					currentDate,
					storeDTO,
					addressList,
					takePhone,
					takeName,
					payType
				} = this;
				const orderProductVOList = [];
				let currentYear = new Date().getFullYear();
				let currentMonth = new Date().getMonth() + 1;
				let currentToady = new Date().getDate();
				goodsList.forEach(item => {
					let obj = {};
					obj.number = item.number;
					obj.productSpecsId = status == 1 ? item.product_id : item.productSpecsId;
					obj.productUpId = item.id;
					orderProductVOList.push(obj);
				});
				const param = {
					addressId: address.id,
					type: status == 2 ? 0 : status,
					userId,
					orderProductVOList
				};
				if (status == 1) {
					param.takePhone = takePhone;
					param.takeName = takeName;
					param.takeTime = `${currentYear}/${currentMonth}/${currentToady} ${currentDate}`;
					param.storeId = storeDTO.storeId;
				}
				const {
					province
				} = address;
				if (province == '青海省' || province == '内蒙古自治区' || province == '宁夏回族自治区' || province == '海南省' || province ==
					'西藏自治区' || province == '新疆维吾尔自治区') {
					this.$toast('当前区域快递无法送达，请更换收货地址后购买');
					return;
				}
				if (addressList.length > 0 || status == 1) {
					this.$request.miniCreateOrder(param).then(result => {
						if (result.msg == '成功') {
							uni.setStorageSync('cartList', []);
							this.$toast('加载中', 2000, 'loading')
							// #ifdef H5
							this.$toast('订单创建成功，前往APP/小程序支付！')
							// #endif
							// 微信小程序支付
							// #ifdef MP-WEIXIN
							const payments = {
								id: result.data,
							}
							this.$request.miniOrderPay(payments).then(res => {
								console.log(res)
								const data = JSON.parse(res.data);
								const {
									timeStamp,
									nonceStr,
									signType,
									paySign
								} = data;
								uni.requestPayment({
									timeStamp,
									nonceStr,
									package: data.package,
									signType,
									paySign,
									success: function(request) {
										console.log(request, 'request');
										if (request.errMsg == 'requestPayment:ok') {
											// 支付成功
											if (status == 1) {
												uni.setStorageSync('cartList', []);
											}
											uni.redirectTo({
												url: `/pages/premiumBag/goods/paySuccess?orderId=${result.data}`,
											});
										}

									},
									fail: function(error) {
										console.log(error, 'error');
										// 支付失败
										showToast('支付失败');
										setTimeout(() => {
											uni.redirectTo({
												url: `/pages/premiumBag/mine/orderDetail?orderId=${result.data}`,
											});
										}, 10)
									}
								});
							})
							// #endif
							// app支付
							// #ifdef APP-PLUS  
							const payment = {
								id: result.data,
								paidWay: payType,
							}
							this.$request.miniOrderPay(payment).then(res => {
								if (res.code == 200 && res.isSuccess) {
									if (payType == 2) {
										const paymentData = res.data;
										let reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
										plus.runtime.openURL(encodeURI(paymentData.match(reg)[0]));
										this.$goPath(5, `/pages/premiumBag/mine/orderDetail?orderId=${result.data}`)
									} else {
										//余额不足需要跳转微信支付
										let paymentData = JSON.parse(res.data);
										plus.share.getServices(service => {
											let weixin = service.find(i => i.id === 'weixin')
											if (weixin) {
												weixin.launchMiniProgram({
													id: "gh_f3a8a1c4d7cf",
													path: `/pages/payIndex/payIndex?rc_result=${JSON.stringify(paymentData)}`,
													type: 0,
													webUrl: ''
												}, res => {
													this.$goPath(5, `/pages/premiumBag/mine/orderDetail?orderId=${result.data}`)
												}, err => {
													this.$goPath(5, `/pages/premiumBag/mine/orderDetail?orderId=${result.data}`)
												})
											} else {
												// 没有获取到微信分享服务
												console.log('没有获取到微信分享服务');
											}
										}, err => {
											// 获取分享服务列表失败
											console.log(err);
										})
									}
								} else {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									});
								}
							});

							// #endif


						}
					})
				} else {
					this.$toast('暂无收货地址，快去新建一个吧!');
				}

			},
		},
	}
</script>
<style scoped>
	page view::-webkit-scrollbar {
		width: 0;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		padding: 24rpx 24rpx 0;
		display: flex;
		flex-direction: column;
		position: relative;
		font-family: 'PingFang SC-Medium', 'PingFang SC';
	}

	.container-header {
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;

	}

	.container-header_top {
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
		padding-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.container-header_top>view {
		display: flex;
		align-items: center;
	}

	.container-header_top>view:first-child {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
	}

	.container-header .remind-title {
		margin-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.container-header .title {
		line-height: 48rpx;
		font-size: 28rpx;
		color: #000;
		flex: 1;
	}

	.container-header view {
		font-size: 24rpx;
		color: #666;
	}

	.container_introduce {
		width: 100%;
	}

	.container_introduce>view:first-child {
		flex: 1;
	}

	.container_flex {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.container-header_bottom {
		padding-top: 24rpx;
	}

	.title2 {
		color: #333333;
		justify-content: flex-end;
	}

	.payment {
		width: 710rpx;
		background-color: #fff;
		border-radius: 16rpx;
		font-size: 28rpx;
		padding: 24rpx;


	}

	.payItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.paymentbox_l {
		display: flex;
		align-items: center;

	}

	.payType {
		padding-left: 12rpx;
	}

	.container-section {
		flex: 1;
		padding: 24rpx;
		padding-bottom: 40rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 24rpx 0;
		/* overflow: scroll; */
	}

	.container-section::-webkit-scrollbar {
		width: 0;
	}

	.shop-list {
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
	}

	.shop-list_item {
		display: flex;
		padding-bottom: 24rpx;
	}

	.shop-list_item_img {
		width: 128rpx;
		height: 128rpx;
	}

	.shop-list_item_img image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx 8rpx;
	}

	.shop-list_item_text {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}

	.shop-list_item_text_title {
		display: -webkit-box;
		font-size: 28rpx;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-word;
	}

	.shop-list_item_text_tags .tag {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 8rpx 0 0 0;
	}

	.shop-list_item_text_tags .tag>view {
		color: #FF6F40;
		background: transparent;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		border: 1rpx solid #FF6F40;
		padding: 0 8rpx;
		border-radius: 4rpx;
		line-height: 30rpx;
		margin: 0 8rpx 8rpx 0;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		word-break: keep-all;
		text-overflow: ellipsis;
	}

	.shop-list_item_text_price {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		color: #333;
		display: flex;
		align-items: flex-end;
	}

	.shop-list_item_text_price text {
		font-size: 32rpx;
	}

	.shop-list_item_text_price .number {
		margin-left: 5rpx;
		color: #999;
	}

	.vip-exclusive-discounts {
		margin: 24rpx 0;
	}

	.preferential-price {
		color: #EA5F5F;
		font-size: 28rpx;
	}

	.sum-price {
		text-align: right;
		color: #333333;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.sum-price>text {
		color: #EA5F5F;
		font-size: 40rpx;
	}

	.container-btn {
		width: 100%;
		left: 0;
		bottom: 0;
		position: fixed;
		padding-bottom: env(safe-area-inset-bottom, -24rpx);
		padding-top: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #fff;
	}

	.container-btn>view {
		width: 654rpx;
		height: 92rpx;
		display: flex;
		font-size: 28rpx;
		border-radius: 46rpx 46rpx;
	}

	.price-sum {
		position: relative;
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 200rpx;
		background-color: #333333;
		font-size: 20rpx;
		border-radius: 46rpx 0 0 46rpx;
	}

	.price-sum .btn-logo {
		position: absolute;
		left: 46rpx;
		bottom: 0;
	}

	.price-sum .btn-logo image {
		width: 144rpx;
		height: 128rpx;
		display: block;
	}

	.total-price {
		display: flex;
		align-items: center;
	}

	.total-price>view text {
		font-size: 34rpx;
	}

	.total-price>text {
		margin-left: 8rpx;
		font-size: 20rpx;
		font-family: 'PingFang SC-Regular', 'PingFang SC';
	}

	/* .total-price>.freeShipping {
  font-size: 20rpx;
  color: #DFC062;
  margin-left: 12rpx;
} */

	.submit-payment {
		width: 150rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 0 46rpx 46rpx 0;
		background-color: #32B499;
	}

	.t-popup--bottom {
		border-radius: 32rpx 32rpx 0 0 !important;
	}

	.popup-block {
		width: 100vw;
		height: 600rpx;
		background: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		display: flex;
		flex-direction: column;
	}

	.picker-header_title {
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.picker-section {
		flex: 1;
		overflow: auto;
		display: flex;
	}

	.picker-section_left {
		width: 258rpx;
		height: 100%;
		border-right: 2rpx solid rgba(241, 241, 241, 0.8);
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
	}

	.picker-section_left>view {
		width: 100%;
		height: 92rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
	}

	.picker-section_right {
		flex: 1;
		padding: 0 24rpx;
		overflow: scroll;
	}

	.picker-section_right>view {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.picker-section_right>.now-take {
		height: 92rpx;
	}

	.take-goods-checkd {
		color: #32B499;
	}

	.popup_selected_product {
		width: 100vw;
		min-height: 600rpx;
		height: 800rpx;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 0 24rpx;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}

	.popup_title {
		line-height: 92rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
	}

	.popup_operate {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}

	.popup_operate>view {
		padding: 24rpx 0;
		margin-left: 48rpx;
	}

	.popup-address_list {
		flex: 1;
		overflow: scroll;
	}

	.popup-address_list::-webkit-scrollbar {
		width: 0;
	}

	.address-list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 28rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.address-list-item:last-child {
		margin-bottom: 0;
	}

	.address-list-item>view {
		display: flex;
		align-items: center;
	}

	.address-list-item>view>image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.address-list-item .address-list-item_left {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50% 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #32B499;
	}

	.address-list-item_center {
		flex: 1;
		margin-left: 15rpx;
		margin-right: 24rpx;
	}

	.address-list-item_center>view {
		display: flex;
	}

	.address-list-item_center>view .name {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 33rpx;
		display: block;
		margin-right: 5rpx;
	}

	.address-list-item_center>view .default-text {
		width: 56rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #32B499;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #32B499;
		margin-left: 16rpx;
	}

	.container-editPhone {
		width: 560rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 16rpx;
		color: #333;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
	}

	.container-editPhone .edit-input {
		height: 110rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: none;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
		display: flex;
		align-items: center;
	}

	.container-editPhone .edit-input input {
		flex: 1;
		height: 60rpx;
		border: 2rpx solid rgba(241, 241, 241);
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.edit-btns {
		width: 100%;
		flex: 1;
		display: flex;
	}

	.edit-btns>view {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.edit-btns>view:last-child {
		color: #32B499;
		border-left: 2rpx solid rgba(241, 241, 241, 0.8);
	}

	.edit-phone {
		display: flex;
		align-items: center;
	}

	.edit-phone>text {
		margin-right: 10rpx;
	}

	.freight {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		color: #333;
		font-size: 28rpx;
		font-family: 'PingFang SC-Medium', 'PingFang SC';
	}

	.freight>view {
		display: flex;
		align-items: center;
	}

	.freight>view view {
		margin-right: 8rpx;
	}

	.freight .freight-price {
		color: #EA5F5F;
		font-size: 24rpx;
	}

	.freight .freight-price text {
		font-size: 34rpx;
		font-weight: bold;
		font-family: 'PingFang SC-Bold', 'PingFang SC';
	}

	.container-freightModal {
		width: 560rpx;
		padding: 40rpx 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
		font-family: 'PingFang SC-Regular', 'PingFang SC';
	}

	.container-freightModal-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		font-family: 'PingFang SC-Medium', 'PingFang SC';
		margin-bottom: 12rpx;
	}

	.loading_title {
		padding-top: 20rpx;
	}

	.loading_popup {
		width: 600rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.loading_popup .loading_box {
		overflow: auto;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}

	.loading_btn {
		width: 140rpx;
		line-height: 65rpx;
		background-color: #32B499;
		margin: 50rpx auto;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;


	}
</style>